<template>
	<div class="echarts-box" style="width: 100%; height: 100%">
		<Echart :options="options" id="bar2Chartaaa"></Echart>
	</div>
</template>

<script>
import { graphic } from "echarts";
const basicColors = [
	["#ABDCFF", "#0396FF"],
	["#90F7EC", "#32CCBC"],
	["#FFF6B7", "#F6416C"],
	["#E2B0FF", "#9F44D3"],
	["#43CBFF", "#9708CC"],
	["#FCCF31", "#F55555"],
	["#F761A1", "#8C1BAB"],
	["#81FBB8", "#28C76F"],
];
// 生成渐变色
function genLinearGradient(colors) {
	const color = {
		type: "linear",
		x: 0,
		y: 0,
		x2: 0,
		y2: 1,
		colorStops: [
			{
				offset: 0,
				color: colors[0], // 0%处的颜色
			},
			{
				offset: 1,
				color: colors[1], // 100%处的颜色
			},
		],
		global: false,
	};
	return color;
}
export default {
	data() {
		return {
			options: {},
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			this.options = {
				tooltip: {
					trigger: "axis",
					backgroundColor: "rgba(0,0,0,.6)",
					borderColor: "rgba(147, 235, 248, 0)",
					textStyle: {
						color: "#FFF",
					},
					// axisPointer: {
					// 	type: "shadow",
					// 	label: {
					// 		show: true,
					// 	},
					// },
				},
				grid: {
					left: "2%",
					right: "2%",
					bottom: "5%",
					top: "30px",
					containLabel: true,
				},
				legend: {
					// left: 10,
					// top: 12,
					itemWidth: 12,
					itemHeight: 10,
					textStyle: {
						fontSize: 12,
						color: "#6A93B9",
						// rich 自定义富文本样式
						rich: {
							a: {
								verticalAlign: "bottom",
							},
						},
					},
				},
				xAxis: {
					type: "category",
					data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
					axisTick: {
						show: false,
					},
					axisLine: {
						lineStyle: {
							color: "#ddd",
							width: 1, // 这里是为了突出显示加上的
						},
					},
					axisLabel: {
						color: "#ddd",
						fontSize: 12,
					},
				},

				yAxis: {
					type: "value",
					// max: "1200",
					splitArea: { show: false },
					axisLine: {
						show: false,
					},
					axisTick: {
						show: false,
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: "rgba(255, 255, 255, 0.15)",
						},
					},
					axisLabel: {
						fontSize: 12,
						fontFamily: "Bebas",
						color: "#ddd",
					},
				},
				// dataZoom: [
				// 	{
				// 		show: true,
				// 		height: 12,
				// 		xAxisIndex: [0],
				// 		bottom: "8%",
				// 		start: 10,
				// 		end: 90,
				// 		handleIcon:
				// 			"path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
				// 		handleSize: "110%",
				// 		handleStyle: {
				// 			color: "#d3dee5",
				// 		},
				// 		textStyle: {
				// 			color: "#fff",
				// 		},
				// 		borderColor: "#90979c",
				// 	},
				// 	{
				// 		type: "inside",
				// 		show: true,
				// 		height: 15,
				// 		start: 1,
				// 		end: 35,
				// 	},
				// ],
				series: [
					{
						name: "单元1",
						type: "bar",
						barWidth: "15%",
						itemStyle: {
							color: genLinearGradient(basicColors[6]),
							borderRadius: 12,
						},
						data: [400, 400, 300, 300, 300, 400, 400],
					},
					{
						name: "单元2",
						type: "bar",
						barWidth: "15%",
						itemStyle: {
							color: genLinearGradient(basicColors[1]),
							borderRadius: 11,
						},
						data: [400, 500, 500, 500, 500, 400, 400],
					},
					{
						name: "单元3",
						type: "bar",
						barWidth: "15%",
						itemStyle: {
							color: genLinearGradient(basicColors[2]),
							borderRadius: 11,
						},
						data: [400, 600, 700, 700, 1000, 400, 400],
					},
				],
			};
		},
	},
};
</script>

<style lang="scss" scoped></style>
